<template>
  <div>
    <!-- 带表单的弹出框，药品信息修改 -->
    <div>
      <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="药品名字" :label-width="formLabelWidth">
            <el-input
              :disabled="true"
              v-model="form.medicineName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请数量" :label-width="formLabelWidth">
            <el-input v-model="form.cont" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="品牌" :label-width="formLabelWidth">
            <el-input v-model="form.brand" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="enter">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 带表单的弹出框，新增药品 -->
    <div>
      <el-dialog title="修改信息" :visible.sync="addOpen">
        <el-form :model="addForm">
          <el-form-item label="药品名字" :label-width="formLabelWidth">
            <el-input v-model="addForm.medicineName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="申请数量" :label-width="formLabelWidth">
            <el-input v-model="addForm.cont" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="品牌" :label-width="formLabelWidth">
            <el-input v-model="addForm.brand" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addOpen = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <el-button type="success" plain @click="addOpen = true">新增药品</el-button>
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search ||
            data.medicineName.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="药品名字" prop="medicineName"> </el-table-column>
      <el-table-column label="药品数量" prop="cont"> </el-table-column>
      <el-table-column label="品牌" prop="brand"> </el-table-column>

      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >库存补充</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >信息修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <br /><br />
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8, 10, 12]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.$axios
      .get(
        "http://localhost:8080/inventorys/showSupplement/" +
          this.currentPage +
          "/" +
          this.page
      )
      .then((src) => {
        this.tableData = src.data.data.list;
        this.pageInfo = src.data.data;
      });
  },
  data() {
    return {
      tableData: [],
      search: "",
      currentPage: 1,
      page: 8,
      pageInfo: {},
      dialogFormVisible: false,
      form: {},
      formLabelWidth: "100px",
      addOpen: false,
      addForm: {
        medicineName: "",
        cont: "" ,
        brand: "",
      },
    };
  },
  methods: {
    add() {
      this.addOpen = false;
      this.$axios
        .post("http://localhost:8080/inventorys/addSupplement", this.addForm)
        .then((src) => {
          if (src.data.code == 200) {
            this.$message({ message: src.data.msg, type: "success" });
          } else {
            this.$message.error(src.data.msg);
          }
          this.$axios
            .get(
              "http://localhost:8080/inventorys/showSupplement/" +
                this.currentPage +
                "/" +
                this.page
            )
            .then((src) => {
              this.tableData = src.data.data.list;
              this.pageInfo = src.data.data;
            });
        });
    },
    enter() {
      this.dialogFormVisible = false;
      this.$axios
        .put("http://localhost:8080/inventorys/update", this.form)
        .then((src) => {
          if (src.data.code == 200) {
            this.$message({ message: src.data.msg, type: "success" });
          } else {
            this.$message.error(src.data.msg);
          }
          this.$axios
            .get(
              "http://localhost:8080/inventorys/showSupplement/" +
                this.currentPage +
                "/" +
                this.page
            )
            .then((src) => {
              this.tableData = src.data.data.list;
              this.pageInfo = src.data.data;
            });
        });
    },
    handleSizeChange(val) {
      this.page = val;

      this.$axios
        .get(
          "http://localhost:8080/inventorys/showSupplement/" +
            this.currentPage +
            "/" +
            this.page
        )
        .then((src) => {
          this.tableData = src.data.data.list;
          this.pageInfo = src.data.data;
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$axios
        .get(
          "http://localhost:8080/inventorys/showSupplement/" +
            this.currentPage +
            "/" +
            this.page
        )
        .then((src) => {
          this.tableData = src.data.data.list;
          this.pageInfo = src.data.data;
        });
    },
    handleEdit(index, row) {
      this.$axios
        .put("http://localhost:8080/inventorys/updateSupplement", row)
        .then((src) => {
          if (src.data.code == 200) {
            this.$message({ message: src.data.msg, type: "success" });
          } else {
            this.$message.error(src.data.msg);
          }
          this.$axios
            .get(
              "http://localhost:8080/inventorys/showSupplement/" +
                this.currentPage +
                "/" +
                this.page
            )
            .then((src) => {
              this.tableData = src.data.data.list;
              this.pageInfo = src.data.data;
            });
        });
    },
    handleDelete(index, row) {
      this.form = row;
      this.dialogFormVisible = true;
    },
  },
};
</script>
<style lang="less" scoped></style>
